<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <view class="header-content">
        <view class="back-button" @click="goBack">
          <text class="fas fa-arrow-left back-icon"></text>
        </view>
        <text class="header-title">商品管理</text>
        <view class="add-button" @click="addNewProduct">
          <text class="fas fa-plus add-icon"></text>
        </view>
      </view>
    </view>

    <!-- Stats Cards -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-card">
          <text class="stat-number indigo-number">128</text>
          <text class="stat-label">在售商品</text>
        </view>
        <view class="stat-card">
          <text class="stat-number orange-number">5</text>
          <text class="stat-label">库存预警</text>
        </view>
        <view class="stat-card">
          <text class="stat-number green-number">98.5%</text>
          <text class="stat-label">好评率</text>
        </view>
      </view>
    </view>

    <!-- Tab Navigation -->
    <view class="tab-section">
      <view class="tab-container">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab-button', currentTab === tab.key ? 'tab-active' : 'tab-inactive']"
          @click="switchTab(tab.key)"
        >
          <text>{{ tab.label }}</text>
        </view>
      </view>
    </view>

    <!-- Search Bar -->
    <view class="search-section">
      <view class="search-container">
        <text class="fas fa-search search-icon"></text>
        <input
          class="search-input"
          placeholder="搜索商品名称/SKU"
          v-model="searchKeyword"
        />
      </view>
    </view>

    <!-- Product Lists -->
    <scroll-view class="product-list" scroll-y="true">
      <!-- 在售中商品 -->
      <view v-if="currentTab === 'selling'" class="tab-content">
        <view
          v-for="(product, index) in sellingProducts"
          :key="index"
          class="product-item"
        >
          <image :src="product.image" class="product-image" mode="aspectFill"></image>
          <view class="product-info">
            <view class="product-header">
              <view class="product-details">
                <text class="product-name">{{ product.name }}</text>
                <text class="product-sku">SKU: {{ product.sku }}</text>
              </view>
              <view class="toggle-switch" @click="toggleProduct(index)">
                <view :class="['switch-track', product.isActive ? 'switch-active' : 'switch-inactive']">
                  <view :class="['switch-thumb', product.isActive ? 'thumb-active' : 'thumb-inactive']"></view>
                </view>
              </view>
            </view>
            <view class="product-footer">
              <view class="price-info">
                <text class="current-price">¥{{ product.price }}</text>
                <text class="original-price">¥{{ product.originalPrice }}</text>
                <text class="stock-info">库存: {{ product.stock }}</text>
              </view>
              <view class="action-buttons">
                <text class="edit-button" @click="editProduct(product)">编辑</text>
                <text class="offline-button" @click="offlineProduct(product)">下架</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 已下架商品 -->
      <view v-if="currentTab === 'offline'" class="tab-content">
        <view
          v-for="(product, index) in offlineProducts"
          :key="index"
          class="product-item offline-item"
        >
          <image :src="product.image" class="product-image" mode="aspectFill"></image>
          <view class="product-info">
            <view class="product-header">
              <view class="product-details">
                <text class="product-name offline-name">{{ product.name }}</text>
                <text class="product-sku">SKU: {{ product.sku }}</text>
              </view>
              <view class="status-badge offline-badge">
                <text>已下架</text>
              </view>
            </view>
            <view class="product-footer">
              <view class="price-info">
                <text class="offline-price">¥{{ product.price }}</text>
                <text class="original-price">¥{{ product.originalPrice }}</text>
                <text class="offline-stock">库存: {{ product.stock }}</text>
              </view>
              <view class="action-buttons">
                <text class="edit-button" @click="editProduct(product)">编辑</text>
                <text class="online-button" @click="onlineProduct(product)">上架</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 库存预警商品 -->
      <view v-if="currentTab === 'warning'" class="tab-content">
        <view
          v-for="(product, index) in warningProducts"
          :key="index"
          class="product-item warning-item"
        >
          <image :src="product.image" class="product-image" mode="aspectFill"></image>
          <view class="product-info">
            <view class="product-header">
              <view class="product-details">
                <text class="product-name">{{ product.name }}</text>
                <text class="product-sku">SKU: {{ product.sku }}</text>
              </view>
              <view :class="['status-badge', product.warningLevel === 'urgent' ? 'urgent-badge' : 'warning-badge']">
                <text>{{ product.warningLevel === 'urgent' ? '急需进货' : '低库存' }}</text>
              </view>
            </view>
            <view class="product-footer">
              <view class="price-info">
                <text class="current-price">¥{{ product.price }}</text>
                <text class="original-price">¥{{ product.originalPrice }}</text>
                <text :class="['stock-info', product.warningLevel === 'urgent' ? 'urgent-stock' : 'warning-stock']">
                  库存: {{ product.stock }}
                </text>
              </view>
              <view class="action-buttons">
                <text
                  :class="['restock-button', product.warningLevel === 'urgent' ? 'urgent-restock' : 'normal-restock']"
                  @click="restockProduct(product)"
                >
                  {{ product.warningLevel === 'urgent' ? '紧急进货' : '立即进货' }}
                </text>
                <text class="edit-button" @click="editProduct(product)">编辑</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 待审核商品 -->
      <view v-if="currentTab === 'pending'" class="tab-content">
        <view
          v-for="(product, index) in pendingProducts"
          :key="index"
          class="product-item pending-item"
        >
          <image :src="product.image" class="product-image" mode="aspectFill"></image>
          <view class="product-info">
            <view class="product-header">
              <view class="product-details">
                <text class="product-name">{{ product.name }}</text>
                <text class="product-sku">SKU: {{ product.sku }}</text>
              </view>
              <view class="status-badge pending-badge">
                <text>待审核</text>
              </view>
            </view>
            <view class="product-footer">
              <view class="price-info">
                <text class="current-price">¥{{ product.price }}</text>
                <text class="pending-status">待审核价格</text>
              </view>
              <view class="action-buttons">
                <text class="review-button" @click="reviewProduct(product)">查看审核</text>
                <text class="edit-button" @click="editProduct(product)">编辑</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="list-bottom"></view>
    </scroll-view>

    <!-- Bottom Actions -->
    <view class="bottom-actions">
      <view class="action-content">
        <view class="select-all" @click="toggleSelectAll">
          <text class="checkbox" :class="{ 'checked': isAllSelected }">{{ isAllSelected ? '✓' : '' }}</text>
          <text class="select-text">全选</text>
        </view>
        <view class="batch-buttons">
          <text class="batch-offline-btn" @click="batchOffline">批量下架</text>
          <text class="batch-edit-btn" @click="batchEdit">批量编辑</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'selling',
      searchKeyword: '',
      isAllSelected: false,

      tabs: [
        { key: 'selling', label: '在售中(128)' },
        { key: 'offline', label: '已下架(12)' },
        { key: 'warning', label: '库存预警(5)' },
        { key: 'pending', label: '待审核(3)' }
      ],

      sellingProducts: [
        {
          id: 1,
          name: '无线蓝牙耳机 Pro Max',
          sku: 'BT-001-PRO',
          price: 299,
          originalPrice: 399,
          stock: 186,
          image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=80&h=80&fit=crop',
          isActive: true
        },
        {
          id: 2,
          name: '便携充电宝 20000mAh',
          sku: 'PB-20K-WHT',
          price: 89,
          originalPrice: 129,
          stock: 325,
          image: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=80&h=80&fit=crop',
          isActive: true
        },
        {
          id: 3,
          name: '无线键盘鼠标套装',
          sku: 'KB-MS-001',
          price: 159,
          originalPrice: 229,
          stock: 96,
          image: 'https://images.unsplash.com/photo-1585298723682-7115561c51b7?w=80&h=80&fit=crop',
          isActive: true
        }
      ],

      offlineProducts: [
        {
          id: 4,
          name: '可折叠蓝牙音箱',
          sku: 'SPK-FLD-001',
          price: 199,
          originalPrice: 299,
          stock: 25,
          image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=80&h=80&fit=crop'
        },
        {
          id: 5,
          name: 'USB-C 多功能扩展坐',
          sku: 'HUB-C-007',
          price: 129,
          originalPrice: 189,
          stock: 0,
          image: 'https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=80&h=80&fit=crop'
        }
      ],

      warningProducts: [
        {
          id: 6,
          name: '智能手表 Series 6',
          sku: 'SW-006-BLK',
          price: 1299,
          originalPrice: 1699,
          stock: 3,
          image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=80&h=80&fit=crop',
          warningLevel: 'low'
        },
        {
          id: 7,
          name: '智能手环 Pro',
          sku: 'FIT-PRO-002',
          price: 399,
          originalPrice: 499,
          stock: 1,
          image: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=80&h=80&fit=crop',
          warningLevel: 'urgent'
        }
      ],

      pendingProducts: [
        {
          id: 8,
          name: '新款跑步鞋 2025',
          sku: 'RUN-2025-001',
          price: 599,
          originalPrice: 0,
          stock: 0,
          image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=80&h=80&fit=crop'
        },
        {
          id: 9,
          name: '无线充电器 15W',
          sku: 'CHG-15W-003',
          price: 199,
          originalPrice: 0,
          stock: 0,
          image: 'https://images.unsplash.com/photo-1706275399762-3989a59e6249?w=80&h=80&fit=crop'
        }
      ]
    }
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },

    addNewProduct() {
      uni.navigateTo({
        url: '/pages/goods/add/add'
      })
    },

    switchTab(tabKey) {
      this.currentTab = tabKey
    },

    toggleProduct(index) {
      this.sellingProducts[index].isActive = !this.sellingProducts[index].isActive
    },

    editProduct(product) {
      uni.navigateTo({
        url: `/pages/goods/edit/edit?id=${product.id}`
      })
    },

    offlineProduct(product) {
      uni.showModal({
        title: '确认下架',
        content: `确定要下架商品"${product.name}"吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '商品已下架',
              icon: 'success'
            })
          }
        }
      })
    },

    onlineProduct(product) {
      uni.showModal({
        title: '确认上架',
        content: `确定要上架商品"${product.name}"吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '商品已上架',
              icon: 'success'
            })
          }
        }
      })
    },

    restockProduct(product) {
      uni.navigateTo({
        url: `/pages/goods/restock/restock?id=${product.id}`
      })
    },

    reviewProduct(product) {
      uni.navigateTo({
        url: `/pages/goods/review/review?id=${product.id}`
      })
    },

    toggleSelectAll() {
      this.isAllSelected = !this.isAllSelected
    },

    batchOffline() {
      uni.showModal({
        title: '批量下架',
        content: '确定要下架选中的商品吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '批量下架成功',
              icon: 'success'
            })
          }
        }
      })
    },

    batchEdit() {
      uni.navigateTo({
        url: '/pages/goods/batch-edit/batch-edit'
      })
    }
  }
}
</script>

<style>
.container {
  background-color: #f3f4f6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.header {
  background: linear-gradient(to right, #4f46e5, #9333ea);
  padding: 24rpx 32rpx;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.back-button, .add-button {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon, .add-icon {
  font-size: 36rpx;
  color: white;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
}

/* Stats Section */
.stats-section {
  padding: 24rpx 32rpx;
  background-color: #f9fafb;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
}

.stat-card {
  background-color: white;
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
  border: 2rpx solid #e5e7eb;
}

.stat-number {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.indigo-number { color: #4f46e5; }
.orange-number { color: #ea580c; }
.green-number { color: #16a34a; }

.stat-label {
  font-size: 24rpx;
  color: #6b7280;
}

/* Tab Section */
.tab-section {
  padding: 16rpx 32rpx;
  background-color: white;
  border-bottom: 2rpx solid #e5e7eb;
}

.tab-container {
  display: flex;
  gap: 32rpx;
}

.tab-button {
  padding-bottom: 16rpx;
  font-size: 28rpx;
  position: relative;
}

.tab-active {
  color: #4f46e5;
  font-weight: 500;
  border-bottom: 4rpx solid #4f46e5;
}

.tab-inactive {
  color: #6b7280;
}

/* Search Section */
.search-section {
  padding: 24rpx 32rpx;
  background-color: white;
  border-bottom: 2rpx solid #f3f4f6;
}

.search-container {
  display: flex;
  align-items: center;
  background-color: #f3f4f6;
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
}

.search-icon {
  font-size: 28rpx;
  color: #9ca3af;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  background: transparent;
  font-size: 28rpx;
  border: none;
  outline: none;
}

/* Product List */
.product-list {
  flex: 1;
  padding-bottom: 160rpx;
}

.tab-content {
  background-color: white;
}

.product-item {
  display: flex;
  align-items: flex-start;
  padding: 24rpx 32rpx;
  border-bottom: 2rpx solid #f3f4f6;
}

.offline-item {
  opacity: 0.75;
}

.warning-item {
  background-color: #fff7ed;
  border-bottom-color: #fed7aa;
}

.pending-item {
  background-color: #fefce8;
  border-bottom-color: #fde047;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  margin-right: 24rpx;
}

.product-info {
  flex: 1;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.product-details {
  flex: 1;
}

.product-name {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.offline-name {
  color: #6b7280;
}

.product-sku {
  font-size: 24rpx;
  color: #6b7280;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 72rpx;
  height: 40rpx;
}

.switch-track {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
  position: relative;
  transition: all 0.3s ease;
}

.switch-active {
  background-color: #16a34a;
}

.switch-inactive {
  background-color: #e5e7eb;
}

.switch-thumb {
  position: absolute;
  top: 4rpx;
  width: 32rpx;
  height: 32rpx;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.thumb-active {
  left: 36rpx;
}

.thumb-inactive {
  left: 4rpx;
}

/* Status Badges */
.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.offline-badge {
  background-color: #f3f4f6;
  color: #6b7280;
}

.warning-badge {
  background-color: #fed7aa;
  color: #ea580c;
}

.urgent-badge {
  background-color: #fecaca;
  color: #dc2626;
}

.pending-badge {
  background-color: #fde047;
  color: #ca8a04;
}

/* Product Footer */
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price-info {
  display: flex;
  align-items: center;
  gap: 24rpx;
  font-size: 24rpx;
}

.current-price {
  color: #dc2626;
  font-weight: bold;
}

.offline-price {
  color: #6b7280;
  font-weight: bold;
}

.original-price {
  color: #9ca3af;
  text-decoration: line-through;
}

.stock-info {
  color: #16a34a;
}

.offline-stock {
  color: #6b7280;
}

.warning-stock {
  color: #ea580c;
  font-weight: 500;
}

.urgent-stock {
  color: #dc2626;
  font-weight: 500;
}

.pending-status {
  color: #6b7280;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 16rpx;
}

.edit-button {
  font-size: 24rpx;
  color: #3b82f6;
}

.offline-button {
  font-size: 24rpx;
  color: #6b7280;
}

.online-button {
  font-size: 24rpx;
  color: #16a34a;
}

.restock-button {
  font-size: 24rpx;
  padding: 8rpx 24rpx;
  border-radius: 8rpx;
  color: white;
}

.normal-restock {
  background-color: #ea580c;
}

.urgent-restock {
  background-color: #dc2626;
}

.review-button {
  font-size: 24rpx;
  padding: 8rpx 24rpx;
  border-radius: 8rpx;
  background-color: #3b82f6;
  color: white;
}

/* List Bottom */
.list-bottom {
  height: 64rpx;
}

/* Bottom Actions */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-top: 2rpx solid #e5e7eb;
  padding: 24rpx 32rpx;
  box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.1);
}

.action-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-all {
  display: flex;
  align-items: center;
}

.checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #d1d5db;
  border-radius: 4rpx;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  color: white;
}

.checkbox.checked {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.select-text {
  font-size: 28rpx;
  font-weight: 500;
}

.batch-buttons {
  display: flex;
  gap: 24rpx;
}

.batch-offline-btn {
  background-color: #6b7280;
  color: white;
  font-size: 28rpx;
  padding: 16rpx 32rpx;
  border-radius: 16rpx;
  font-weight: 500;
}

.batch-edit-btn {
  background-color: #4f46e5;
  color: white;
  font-size: 28rpx;
  padding: 16rpx 32rpx;
  border-radius: 16rpx;
  font-weight: 500;
}

/* FontAwesome Icons */
.fas {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}
</style>